<template>
    <div>
        <el-card class="mt-4 !border-none" shadow="never">
            <div class="flex justify-between mb-7">
                <div class="font-medium">订单信息——<span class="top-status">{{ info.status == 1?'支付成功':'已退款' }}</span></div>
                <el-button v-if="info.status == 1" v-perms="['server.server/backMoney']" type="danger" @click="handleBack(info)">退款</el-button>
            </div>
            
            <el-row type="flex">
                <el-col class="flex" :span="8">
                    <div class="title">订单编号：</div>
                    <div class="">{{ info.sn }}</div> 
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">创建时间：</div>
                    <div class="">{{ info.create_time }}</div>
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">支付时间：</div>
                    <div class="">{{ info.pay_time }}</div>
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">支付方式：</div>
                    <div class="">{{ payType(info.pay_type) }}</div>
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">付款人：</div>
                    <div>{{ info.userinfo.realname }}</div>
                </el-col>
                <el-col class="flex" :span="8">
                    <div class="title">手机号：</div>
                    <div>{{ info.userinfo.account }}</div>
                </el-col>
            </el-row>
        </el-card>

        <!-- 商品信息 -->
        <el-card class="mt-4 !border-none" shadow="never">
            <div class="font-medium mb-7">商品信息</div>
            <div>
                <el-table :data="[
                    {
                        good_type_name: info.good_type_name,
                        good_name: info.good_name,
                        price: info.sku_info.price,
                        actual_money: info.actual_money,
                        num: info.num,
                        serverinfo: info.serverinfo,
                        has_subsidy: info.sku_info.has_subsidy,
                        subsidy_type: info.sku_info.subsidy_type,
                        subsidy_money: info.subsidy_money,
                        sku_info: info.sku_info
                    }
                ]">
                    <el-table-column label="服务商名称" prop="serverinfo.realname" min-width="160" />
                    <el-table-column label="服务商手机号" prop="serverinfo.account" min-width="130" />
                    <el-table-column label="商品类型" prop="good_type_name" min-width="160" />
                    <el-table-column label="商品名称" prop="good_name" min-width="200" />
                    <el-table-column label="商品规格" prop="sku_info.name" min-width="120" />
                    <el-table-column label="商品单价" prop="sku_info.price" min-width="120" />
                    <el-table-column label="购买数量" prop="num" min-width="120">
                        <template #default="{ row }">
                        <div class="flex items-center">
                            <div class="pt-[5px]">✖️</div>
                            <span> {{ row.num }}</span>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column label="合计金额" prop="actual_money" min-width="120" >
                        <template #default="{ row }">
                            <span>{{ (row.num * row.price).toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="实际支付" prop="actual_money" min-width="120" />
                    <el-table-column label="是否参与补贴" prop="has_subsidy" min-width="120">
                        <template #default="{ row }">
                            <span v-if="row.has_subsidy == 0">否</span>
                            <span v-else>是</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="补贴方式" prop="subsidy_type" min-width="120">
                        <template #default="{ row }">
                            <span v-if="row.subsidy_type == 1">直接补贴</span>
                            <span v-else-if="row.subsidy_type == 2">支付金额返点</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="平台补贴（元）" prop="subsidy_money" min-width="140">
                        <template #default="{ row }">
                            <span>{{ row.subsidy_money }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 积分抵扣 -->
        <el-card class="mt-4 !border-none" shadow="never">
            <div class="font-medium mb-7">积分抵扣</div>
            <div class="w-8/12">
                <el-table :data="[{
                    use_integral: info.use_integral,
                    deduction_price: info.deduction_price,
                    sn: info.sn,
                    use_integral_desc: info.use_integral_desc
                }]">
                    <el-table-column label="积分抵扣" prop="use_integral" min-width="120">
                        <template #default="{ row }">
                            <span v-if="row.use_integral > 0">是</span>
                            <span v-else>否</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="抵扣金额（元）" prop="deduction_price" min-width="180"></el-table-column>
                    <el-table-column label="消耗积分数量" prop="use_integral" min-width="180"></el-table-column>
                    <el-table-column label="积分订单号" prop="sn" min-width="180">
                        <template #default="{ row }">
                            <div v-if="info.integral_data.length != 0">
                                <div v-for="(item,index) in info.integral_data" :key="index">
                                    <el-link v-perms="['user.integral/integralList']" type="primary" :underline="false" @click="() => {
                                        $router.push({ path: getRoutePath('user.integral/integralList'), query: { sn: item.sn } })
                                    }">{{ item.sn }}</el-link>
                                </div>
                            </div>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="use_integral_desc" min-width="180" ></el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 单个或组合支付支付信息 -->
        <el-card  class="mt-4 !border-none" shadow="never">
            <div class="font-medium mb-7">支付信息 <span class="font-normal text-sm ml-2">实付金额（元）：{{ (Number(info.after_folding_price) + Number(info.use_money)).toFixed(2) }}</span></div>

            <div class="mb-4">
                <el-table :data="info.money_data">
                    <el-table-column label="实际支付" prop="money" min-width="120"></el-table-column>
                    <el-table-column label="支付状态" prop="money_type" min-width="180"/>
                    <el-table-column label="支付方式" prop="pay_type" min-width="180">
                        <template #default="{ row }">
                            <span>{{ payType(row.pay_type) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="支付流水号" prop="transaction_id" min-width="160">
                        <template #default="{ row }">
                            <span>{{ row.transaction_id? row.transaction_id: '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="支付时间" prop="pay_time" min-width="180">
                        <template #default="{ row }">
                            <span>{{ row.pay_time? row.pay_time: '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" prop="name" min-width="120" fixed="right">
                        <!-- <template #default="{ row }">
                            <el-button v-if="row.pay_status == 3" v-perms="['seat.seatOrder/authOrder']" type="primary" link class="mr-2.5" @click="handleSure(row)">到账确认</el-button>
                        </template> -->
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <!-- 分账信息 -->
        <el-card class="mt-4 !border-none" shadow="never">
            <div class="font-medium mb-7">分账信息</div>
            <div class="w-4/12">
                <el-table :data="[{
                    is_separate: info.is_separate,
                    sn: info.sn
                }]">
                    <el-table-column label="分账状态" prop="is_separate" min-width="120">
                        <template #default="{ row }">
                            <span v-if="row.is_separate == 0">未分账</span>
                            <span v-if="row.is_separate == 1">已分账</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="交易流水号" prop="fenzhang" min-width="180">
                        <template #default="{ row }">
                            <div v-if="row.is_separate == 1">
                                <div v-for="(item,index) in info.fenzhang" :key="index">
                                    <el-link type="primary" :underline="false" @click="() => {
                                        $router.push({ path: getRoutePath('user.money/moneyLog'), query: { sn: item.sn } })
                                    }">{{ item.sn }}</el-link>
                                </div>
                            </div>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <el-card class="mt-4 !border-none" shadow="never" v-if="info.status != 1">
            <div class="font-medium mb-7">退款申请</div>
            <div class="w-6/12">
                <el-table :data="[{
                    back_time: info.back_time,
                    back_notice: info.back_notice
                }]">
                    <el-table-column label="退款时间" prop="back_time" min-width="190"></el-table-column>
                    <el-table-column label="退款原因" prop="back_notice" min-width="300"></el-table-column>
                    <!-- <el-table-column label="流水单号" prop="" min-width="190"></el-table-column> -->
                </el-table>
            </div>
        </el-card>

        <back_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck"></back_demand>
    </div>
</template>
<script lang="ts" setup name="channelDetail">
import { orderInfo, backMoney } from '@/api/service';
import back_demand from './back_demand.vue'
const checkState = reactive({
    show: false,
    value: '',
    status: ''
})

import feedback from '@/utils/feedback';
import {getRoutePath} from '@/router'

const route = useRoute();

const handleSure = async (id : number) => {
}

const payTxt = (num:any) => {
    return computed(():string=>{
        let txt = '';
        switch(num) {
            case 1: txt = '待支付';break;
            case 2: txt = '支付中';break;
            case 3: txt = '等待确认（对公）';break;
            case 4: txt = '支付成功 ';break;
            case 5: txt = '支付失败 ';break;
            case 6: txt = '已作废 ';break;
        }
        return txt;
    })
}

const payType = (num:any) => {
    return computed(():string=>{
        let txt = '';
        switch(num) {
            case 1: txt = '微信';break;
            case 2: txt = '支付宝';break;
            case 4: txt = '钱包 ';break;
            case 5: txt = '小程序 ';break;
        }
        return txt;
    })
}

const info:any = ref({
    userinfo: {
        realname: '',
        account: ''
    },
    channelExtra: {
        real_name: '',
        account: ''
    },
    cooperation: {
        sn: ''
    },
    integralData: {
        sn: ''
    },
    moneyData: { // 钱包的支付订单号
        sn: ''
    },
    fenzhang: [], // 分账的两个交易流水号
    integral_data: [],
    sku_info:{
        has_subsidy: '',
        subsidy_type: ''
    },
    money_data: []
})
const getDetails = async () => {
    const data = await orderInfo({
        id: route.query.id
    })
    console.log(data)
    info.value = data
}
route.query.id && getDetails()

// 退款
const handleBack = (row:any) => {
    checkState.show = true;
    checkState.value = row.id;
}
const handleConfirmCheck = async (value : any) => {
    console.log(value)
    await backMoney(value)
    checkState.show = false;
    getDetails()
}
</script>
<style scoped lang="scss">
.flex{
    display: flex;
    height: 40px;
}
.title{
    color: #ccc;
}
.top-status{
    color: var(--el-color-primary);
}
</style>